<template>
    <view class="container">
        <view class="contacts">
            <noData v-if="contactsList.length === 0" content="暂无相关联系人" />
            <uni-swipe-action>
                <!-- :right-options="options" -->
                    <view class="" v-for="(item,index) in contactsList" :key="index">
                        <view class="" v-if="item.length">
                            <view class="start" :id='`letter-${index}`'>
                                {{ index }}
                            </view>
                            <uni-swipe-action-item v-for="(ite, ind) in item" :key="ind">
                                <view :class="['row', ite.customName? 'contacts-i' : '']"  >
                                    <view v-if="ite.customName" class="align-flex">
                                        <view class="info-box">
                                            <view class="align-flex">
                                                <view class="name">
                                                    {{ ite.customName }}
                                                  <span class="identity" v-if="ite.sex === 2">超管</span>
                                                </view>
                                                <view>
                                                    <img class="sex-img" v-if="ite.sex == 0" src="@/static/male.png" alt="" />
                                                    <img class="sex-img" v-if="ite.sex == 1" src="@/static/female.png" alt="" />
                                                </view>
                                            </view>
                                            <view class="phone">
                                                    {{ ite.remark }}
                                            </view>
                                        </view>
                                    </view>
                                    <img v-if="ite.customName" class="phone-img" src="@/static/phone-max.png" alt="" @click.stop="onMakePhoneCall(ite.phone)" />
                                </view>
                                <template v-slot:right>
                                    <view class="delete-box" @click="onDeleteContacts(ite.id)" v-if="ite.sex !== 2">
                                        <img class="delete-img" src="@/static/delete.png" alt="" />
                                        删除
                                    </view>
                                </template>
                            </uni-swipe-action-item>
                        </view>
                    </view>
            </uni-swipe-action>
        </view>
        <view class="foot-btn">
            <button class="long-btn" @click="onAddContacts">
                添加相关联系人
            </button>
        </view>
        <view class="unit-column">
            <view v-for="(item,index) in letter" :key="index" class="unit-column-i" @click="onGoToLetter(item)">
                {{ item }}
            </view>
        </view>
    </view>
</template>
<script setup lang="ts" >
import { ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { getContacts, deleteRelevantContacts } from '@/api/contact'
import user from '@/utils/user'
import { queryFontLetter } from '@/utils/pinyin'
import noData from '@/components/no-data/no-data.vue'
import { toast, confirm } from '@/utils/util'
const dealId = ref()
const companyId = ref()
const contactsList = ref([{
    customName: '王桓泊',
    sex: '0',
    phone: '15930403909',
    userId: 1
}] as any)
const letter = ref(['A', 'B', 'C', 'D', 'E', 'F', 'E', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'])
const getContactsList = async () => {
    const result = await getContacts({
        dealId: dealId.value,
        companyId: companyId.value
    })
    contactsList.value = await initShowWorkers(result)
    console.log(contactsList.value, 'contactsListcontactsListcontactsList')
}
onLoad(async (options) => {
    console.log(options, 'options')
    dealId.value = options.dealId
    companyId.value = options.companyId
})
onShow(async () => {
    await getContactsList()
})
// 删除联系人
const onDeleteContacts = async (id:string) => {
    await confirm('确定删除？')
    await deleteRelevantContacts({
        id
    })
    toast('删除成功')
    await getContactsList()
    console.log(id, '点击删除啦')
}
// 添加联系人
const onAddContacts = async () => {
    uni.navigateTo({
        url: '/packageRemind/pages/addNewClients/addNewClients?dealId=' + dealId.value
        // url: '/pages/customer-contacts/customer-contacts?choice=1' + '&dealId=' + dealId.value
    })
}
// 添加联系人
const goRelated = async (e:number) => {
  console.log(e, 'eeeeeeeee')
  // eslint-disable-next-line no-empty
  if (!e) {
  } else {
    uni.navigateTo({
      url: '/pages/new-contacts/new-contacts?id=' + e
    })
  }
}

// 拨打电话
const onMakePhoneCall = async (event:string) => {
    uni.makePhoneCall({
        phoneNumber: event
    })
}
// 跳转到字母位置
const onGoToLetter = async (event:string) => {
    console.log(event, 'event')
    uni.vibrateShort({})
    const letter = event
    const query = uni.createSelectorQuery()
    query.selectViewport().scrollOffset()
    query.select('#letter-' + letter).boundingClientRect()
    query.exec(res => {
        console.log(res, '字母位置res')
        const scrollTop = res[0].scrollTop
        const top = res[1]?.top ?? 0
        if (top) {
            uni.pageScrollTo({
                scrollTop: top + scrollTop
            })
        }
    })
}
const initShowWorkers = async (list: any) => {
    // 清洗到字母表中
    const data = {
        length: 0
    }
    for (const lettera of letter.value) {
        // 增加对象长度字段判断wxml显示
        data[lettera] = {
            length: 0
        }
    }
    for (const i in list) {
        // 增加对象长度字段判断wxml显示
        data.length += 1
        // 查询首字母
        const letter = queryFontLetter(list[i].customName)[0][0]
        data[letter][list[i].id] = list[i]
        data[letter].length += 1
    }
    return data
}
(async () => {

})()
</script>
<style lang="scss" scoped>
.container {
    // min-height: 100vh;
    padding-bottom: 0;
}
.contacts{
    padding: 30rpx;
    .contacts-i{
        margin: 30rpx 0;
        padding-bottom: 10rpx;
        border-bottom: 1rpx solid #F4F4F7;
    }
    .name{
        color: #202536;
        font-size: 32rpx;
        font-weight: bold;
    }
    .phone{
        color: #565868;
        font-size: 24rpx;
        margin-top: 24rpx;
    }
    .phone-img{
        width: 60rpx;
        height: 60rpx;
        margin-right: 30rpx;
    }
    .sex-img{
        width: 32rpx;
        height: 32rpx;
        margin-left: 12rpx;
    }
    .start{}
}
.unit-column{
    position: fixed;
    right: 2rpx;
    top: 25rpx;
    .unit-column-i{
        margin-bottom: 5rpx;
    }
}
.info-box{
    margin-left: 10rpx;
}
.delete-box{
    width: 129rpx;
    height: 82.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #FF7642;
    color: #fff;
    justify-content: center;
    .delete-img{
        width: 68rpx;
        height: 68rpx;
    }
}

.identity{
  padding: 3rpx 15rpx;
  background: #EBEFFE;
  border-radius: 6rpx;
  opacity: 1;
  border: 1rpx solid #9EAFFA;
  font-size: 24rpx;
  font-weight: normal;
  color: #3E5FF5;
  line-height: 30rpx;
  margin-left: 8rpx;
}
</style>
